<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动 demo</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.div1{width: 100px; height: 100px; position: absolute; top:160px; left:0; background: green;}
	.hc-line{width:1px; height: 600px; position: absolute; left:300px; top:0; background: black;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">javascript 缓冲运动！</h2>
	<p class="wrap-des">
		摘要：刚开始很快，到最后慢慢到达终点。<br>
		原理：越到终点越慢   <br>
		计算： 缓冲速度 = (目标距离-div的正在运动的左边距)/10；
	</p>
	<div class="wrap-main">
		<!--内容写这里-->
		<input type="button" id="btn1" value="运动">
		<div class="div1" id="div1"></div>
		<div class="hc-line"></div>
	</div>
</div>
<script>
	var timer = null;
	window.onload = function (){
		var oBtn1 = document.getElementById("btn1");
		
		oBtn1.onclick = function (){
			moveStart(300);
		}
	}
	
	function moveStart(iTarget){
		var oDiv1 = document.getElementById("div1");
		clearInterval(timer);
		timer = setInterval(function(){
			var iSpeed = (iTarget-oDiv1.offsetLeft)/10;
			iSpeed = oDiv1.offsetLeft < iTarget ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			if ( oDiv1.offsetLeft == iTarget ){
				clearInterval(timer);
			}
			else{
				oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
			}
			console.log(iSpeed);
		},30)
	}
	
</script>
</body>
</html>
